<template>
	<view class="content">
		<view class="contentTop">
			<image :src="img" ></image>
		</view>
		<view class="contentBottom">
			
		
			<view class="Bottom1">
				<view class="contentName">
						<text>{{name}}</text>
				</view>
				<p><u-icon name="phone"></u-icon><view class="Bottom1Txt"><text>热线</text><span style="color: #1667d2;">{{hotline}}</span></view></p>
				<p><u-icon name="map"></u-icon><view class="Bottom1Txt"><text>位置</text><span>{{location}}</span></view></p>
				<p><u-icon name="rmb-circle"></u-icon><view class="Bottom1Txt"><text>价格</text><span style="color: #ff9800;">{{price}}元/月</span></view></p>
			</view>
			<view class="Bottom2">
				<view class="briefName">
						<text>{{briefName}}</text>
				</view>
				<view class="briefTxt">
					<view>
					      <!--  @change="change"
						    @close="close"
						    @open="open" -->
						 <u-collapse
							:border=false
						  > 
						  <u-collapse-item
						        title="宜川养老院（隶属于日月星养老连锁）"
						        name="Docs guide"
						      >
						        <text class="u-collapse-content" >{{briefTxt}}</text>
						      </u-collapse-item>
						  </u-collapse>
					</view>

						
				</view>
			
			</view>
			<view class="Bottom4">
				<!-- 收费标准 -->
				<view class="briefName">
						<text>收费标准</text>
				</view>
				<view class="rates">     
					<p><text>面积：</text><span>58——130平</span></p>
					<p><text>均价：</text><span>17000-18000</span></p>
					<p><text>物业费：</text><span style="color: #ff7300;">3.5元/平方米/月</span></p>
					<p><text>水电费：</text><span>民用</span></p>
				</view>
			</view>
			
			
			<view class="Bottom5">
				<!-- 收费标准 -->
				<view class="briefName">
						<text>机构设施</text>
				</view>
					<image :src="UrlImg" style="width: 100%;"></image>
				<view>
						<u-popup :show="show" @close="close" @open="open">
				            <view>
				              <view class="facilities" v-for="(item, index) in Urlimgs" :key="index">
				              	<image :src="item.urlimg"></image>
				              </view>
				            </view>
						</u-popup>
						<u-button @click="show = true">详情</u-button>
				</view>
			</view>
			
			
			<view class="Bottom3">       <!--评论 -->
				<view class="discuss">
						<text>{{discuss}}(2000+)</text><span style="color: #f35c10; font-size: 18px;">查看全部 > </span>
				</view>
				
				<view class="talk">
					<view class="talkcontent1">
						<u-icon name="account-fill" size="32"></u-icon><text>{{User}}</text>
						
					</view>
					<view class="talkcontent2">
						<text>{{inputvalue}}</text>
					</view>
				
				</view>
				
			</view>
			
			
			
			<view class="commit">
				
				<view>
					<u-calendar color='#FF9800' :show="popshow" :mode="calendarmode" @confirm="confirm" @close="Close"></u-calendar>
					<u-button class="custom-style" type="warning" @click="popshow = true">预定</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					hotline:'187*******1',
					location:'上海市普陀区远景路69号近中潭路',
					price:1550,
					briefName:'养老院简介',
					briefTxt:'上海宜川养老院（隶属于日月星养老连锁）是普陀区人民政府投资一亿余元建设，养老位于上海市中心普陀区远景路69号，占地面积5900余平方米，建筑面积13954平方米，设置床位459张。上海宜川养老院既为自理老人提供环境优雅温馨的养老养生居所，又为因年迈或疾病困扰而不能自理老人提供精心的生活照料和医疗、康复护理服务，特别是对失能老人的照料护理具有显著特点。',
					discuss:'评论',
					inputvalue: '照顾很贴心，环境很美，很适合宜居。',
	
					popshow: false,
					calendarshow: true,
					calendarmode: 'range',
					closeOnClickOverlay:false,
					img:('https://www.zhuinw.com/uploads/20210816/ef73469fd86f19ac1fba0b540502c42f.jpg'),
					name:'真心养老院',
					User:'用户***',
					show: false,
					UrlImg:('https://p3.itc.cn/q_70/images03/20210131/74fc2dcb72e34876b297f2dc9c8aebc9.jpeg'),
					Urlimgs:[
						{	urlimg:"https://p3.itc.cn/q_70/images03/20210131/74fc2dcb72e34876b297f2dc9c8aebc9.jpeg"},
						{	urlimg:"https://p1.itc.cn/q_70/images03/20210131/efa0de1aae1d42618de207f2576cae2a.jpeg"},
						{	urlimg:"https://p5.itc.cn/q_70/images03/20210131/870225d989914c6384a47946c4bb096f.jpeg"},
						{	urlimg:"https://p7.itc.cn/q_70/images03/20210131/7f66629f3e584ef38c5c5dd30ec9f0fa.jpeg"},
						{	urlimg:"https://p6.itc.cn/q_70/images03/20210131/e4008afdb7f9481f82c55855591361e5.jpeg"},
						{	urlimg:"https://p2.itc.cn/q_70/images03/20210131/7e4e6c18661f43c88d0b61c0bd91cc11.jpeg"},
						{	urlimg:"https://p9.itc.cn/q_70/images03/20210131/d7f5a477b2604d8283e94e1d7400bd4b.jpeg"},
						{	urlimg:"https://p4.itc.cn/q_70/images03/20210131/741d26b796ac4b8b8e2cfb2c2861dcf9.jpeg"},
						],
			};
			
		},
		methods: {
			click(item) {
				console.log('item', item);
			},
			Close(){
				this.popshow=false
			},
			
			confirm(e) {
				// console.log(e);
				var date=JSON.stringify(e)
				uni.navigateTo({
					url: '../confirmorder/confirmorder?Data='+ date  
				});
			},
			close() {
			        this.show = false
			        // console.log('close');
			      },
			open(){
				  // console.log('close');
			}
		},
		onLoad(option) {
			var data = JSON.parse(option.Data); // 字符串转对象
			console.log(data)
			this.name=data.title,
			this.img=data.thumb,
			this.location=data.content,
			this.price=data.price,
			this.briefTxt=data.briefTxt,
			this.UrlImg=data.urlimg
			// const eventChannel = this.getOpenerEventChannel()
			// // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			//   eventChannel.on('acceptDataFromOpenerPage', function(data) {
			//     console.log(data.data.content)
			//   })
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		height: 100%;
		width: 100%;
		      //热线价格位置
	}
	.contentTop image{
		width: 100%;
	}
	.contentBottom{
		width: 100%;
		height: 300rpx;
		margin:  0 auto;
		
		border-radius:30px 30px 0px 0px ;
	}
	.contentBottom .contentName{
		text-align: center;
		font-weight: 999;
	}
	.Bottom1{
		width: 90%;
		
		margin: 0 auto;
		background: #ffffff;
		padding: 5% 2% 5% 2%; 
		border-radius: 15px;
		justify-content: space-between;
		margin-top: 3%;
		
	}
	.Bottom1 p{
		width: 100%;
		line-height: 60rpx;
		display: flex;
	
	}
	.Bottom1 text{
		width: 20%;
		font-size: 32rpx;
	}
	.Bottom1 span{
		width: 80%;
		font-size: 32rpx;
		display: flex;
		justify-content: flex-end
	}
	
	.Bottom1Txt{
		width: 100%;
		display: flex;
		justify-content: space-between;
	
		
	}
	
	.Bottom2{                           //养老院简介
		width: 90%;
		background: #ffffff;
		padding: 5% 2% 5% 2%; 
		border-radius: 15px;
		margin:  0 auto;
		margin-top: 3%;
	}
	.briefName{
		height: 60rpx;
		line-height: 60rpx;
		width: 100%;
		margin: 0 auto;
		font-size: 24px;
	}
	.briefTxt{
		font-size: 28rpx;
		width: 100%;
		
		margin: 0 auto;
		text-align:justify;
		display: -webkit-box; /*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical; /*排列方式*/ 
		-webkit-line-clamp: 2; /*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden; /*溢出隐藏*/

	}
	.Bottom4{                           //收费标准
		width: 90%;
		background: #ffffff;
		padding: 5% 2% 5% 2%; 
		border-radius: 15px;
		margin:  0 auto;
		margin-top: 3%;
	}
	
	.Bottom5{                           //收费标准
		width: 90%;
		background: #ffffff;
		padding: 5% 2% 5% 2%; 
		border-radius: 15px;
		margin:  0 auto;
		margin-top: 3%;
	}
	
	.Bottom5 .facilities{
		background-color: #aaff7f;
		width: 100%;
		height: 100%;
		
	}
	
	.facilities image{
		float: left;
		width: 50%;
		height: 120px;
		
	}
	
	
	
	
	.Bottom3{                           //养老院简介
		width: 90%;
		background: #ffffff;
		padding: 5% 2% 5% 2%; 
		border-radius: 15px;
		margin:  0 auto;
		margin-top: 3%;
		margin-bottom: 10%;
	}
	.discuss{         //评论区
		display: flex;
		justify-content: space-between;
		height: 60rpx;
		line-height: 60rpx;
		width: 100%;
		margin: 0 auto;
		font-size: 24px;
		
	}
	.talk{
		height: 100%;
		width: 90%;
		
		margin: 0 auto;
	}
	.talkcontent1{
		display: flex;
		// justify-content: space-around;
		
	}
	.talkcontent2{
		height: 100%;
		width: 100%;
		border-bottom: 2rpx solid #f35c10;
		border-bottom: 2rpx solid #f3f3f3;
		padding: 4% 0% 4% 0%;
	}
	
	.commit{
		width: 100%;
		margin: 0 auto;
		position: fixed;
		bottom: 0;
	}

</style>
